<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>02선택자</title>
		<style type="text/css">
			* {	font-style: italic;
				font-family: Mangal; } /* 전체 선택자 */
				
			h2 { color: gold; } /* 타입 선택자 */			
			hr { width: 50%; border-color: red; }
			
			.myclass { color: red; font-style: normal; font-size: 24px; } /* 클래스 선택자 */
			
			#idh2 { color: navy; font-size: 32px; } /* 아이디 선택자 */
			#idp { color: navy; font-size: 28px; }
			
			input[type="text"] { border: 1px dashed red; } /* 속성 선택자 */
			input[type="password"] { border: 1px dashed blue; }
			
			a:link { color: navy; text-decoration: none; } /* 링크 가상클래스 선택자 */
			a:visited { color: navy; text-decoration: none; }
			a:hover { color: orange; text-decoration: underline; }
			a:active { color: red; text-decoration: underline; }
			
			input:focus { background: cyan; } /* 상태 가상클래스 선택자 */
			input:checked { background: red;}
			input:enabled { background: yellow; }
			input:disabled { background: orange; }
		</style>
	</head>
	<body>
		<h1>CSS 선택자selctor</h1>
		<h2>전체universal 선택자 *</h2>
		<p>모든 요소에 대해 동일한 스타일 적용</p>
		
		<hr />
		<h2>타입type 선택자</h2>
		<p>특정 요소에 대해 스타일 적용</p>

		<hr />
		<h2 class="myclass">클래스class 선택자</h2>
		<p class="myclass">요소 class속성을 통해 스타일 적용</p>
		<p>동일한 스타일을 하나 이상의 요소에 적용</p>
		
		<hr />
		<h2 id="idh2">아이디id 선택자</h2>
		<p id="idp">요소 id 속성명을 통해 스타일 적용</p>
		<p>id속성명은 중복될 수 없으므로 특정 스타일을 특정 요소에만 스타일 적용</p>
		
		<hr />
		<h2>속성attribute 선택자</h2>
		<div><input type="text" /></div>
		<div><input type="password" /></div>
		<div><input type="checkbox" />로그인 기억</div>
		
		<hr />
		<h2>가상클래스 선택자</h2>
		<div><input type="text" disabled="disabled" /></div>
		<div><input type="password" /></div>
		<div><input type="checkbox" checked="checked"/>로그인 기억</div>
		<div><a href="http://www.google.com">구글로 이동</a></div>
		
	</body>
</html>
